<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
    <style>
        #eye {
            position: absolute;
            width: 20%;
            height: 20%;
            bottom: 0;
            right: 0;
            z-index: 999;
            background: red;
            border: solid blue 1px;
        }
    </style>
</head>
<body>
<div id="toolbar"></div>
<div id="cesiumContainer">
</div>
<div id="credit"></div>
<div id="eye"></div>
<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer');

    var viewer1 = initCesium.initViewer('eye');

    let control = viewer1.scene.screenSpaceCameraController;
    control.enableRotate = false;
    control.enableTranslate = false;
    control.enableZoom = false;
    control.enableTilt = false;
    control.enableLook = false;
    let syncViewer = function() {
        viewer1.camera.flyTo({
            destination: viewer.camera.position,
            orientation: {
                heading: viewer.camera.heading,
                pitch: viewer.camera.pitch,
                roll: viewer.camera.roll
            },
            duration: 0.0
        });
    };
    //viewer.camera.changed.addEventListener(syncViewer);

    viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(0, 0),
        label : {
            text : new Cesium.CallbackProperty(function(){
                syncViewer();
                return "";
            }, true)
        }
    });

</script>
</body>

</html>
